<template>
  <div class="mainBox">
    <el-card class="cardBox">
      <el-form
        class="loginForm"
        ref="formEl"
        :model="formLabelAlign"
        :rules="rules"
      >
        <el-form-item>
          <span style="margin: 0 auto">登录</span>
          <el-input
            v-model="formLabelAlign.username"
            placeholder="请输入用户名"
            prop="name"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formLabelAlign.password"
            type="password"
            placeholder="请输入密码"
            prop="password"
          />
        </el-form-item>
        <el-button type="primary" @click="loginFunction">登录</el-button>
      </el-form>
      <el-row>
        <el-col :span="12">
          <div class="leftBox grid-content ep-bg-purple">忘记密码</div>
        </el-col>
        <el-col :span="12">
          <div class="rightBox grid-content ep-bg-purple-light">
            没用账号？<el-link type="primary" @click="openRegister"
              >快速注册</el-link
            >
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
  <Register ref="reg"></Register>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import Register from "./components/register.vue";
import { useUserStore } from "../../store/login.js";

const router = useRouter();
const formEl = ref(null);
const store = useUserStore();
const formLabelAlign = ref({
  username: "",
  password: "",
});
//表单验证规则
const rules = reactive({
  name: [
    { required: true, message: "用户名不能为空", trigger: "blur" }, // 必填
    { max: 6, message: "用户名长度不能超过6位", trigger: "blur" }, // 不超过6位
    {
      pattern: /^[a-zA-Z0-9]+$/, // 正则表达式：纯数字、纯字母或数字与字母组合
      message: "用户名只能包含数字和英文字母",
      trigger: "blur",
    },
  ],

  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d]).+$/,
      message: "密码必须包含至少1个大写字母、1个小写字母、1个数字和1个特殊字符",
      trigger: "blur",
    },
  ],
});

//登录函数
const loginFunction = () => {
  console.log(formEl);
  formEl.value.validate(async (valid) => {
    if (valid) {
      try {
        await store.login(
          formLabelAlign.value.username,
          formLabelAlign.value.password
        );
        ElMessage({
          message: "登录成功",
          type: "success",
        });
        router.push("/home");
      } catch (error) {
        console.log(error);
        ElMessage.error("用户名或密码错误");
      }
    }
  });
};

//注册
const reg = ref("");
const openRegister = () => {
  reg.value.open();
};
</script>
<style lang="scss" scoped>
.mainBox {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  .cardBox {
    width: 300px;
    margin-top: 300px;

    .el-button {
      width: 100%;
      border-radius: 0px;
    }
    .el-row {
      font-size: 12px;
      margin-top: 10px;
      .leftBox {
        text-align: left;
      }
      .rightBox {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
}
</style>
